<template>
  <div class="cardContent">
    <span class="term">{{termTitle}}</span>
    <el-card class="termCard" shadow="never" v-if="termScore.score.length !== 0">
      <div class="termTitle">
        <el-row class="topCalc">
          <el-col class="termName" :span="12">
            <span>学期学分:&nbsp;<span>{{totalPoint.toFixed(1)}}</span></span>
          </el-col>
          <el-col class="totalPoint" :span="12">
            <span>学期绩点:&nbsp;<span>{{termScore.GPA}}</span></span>
          </el-col>
        </el-row>
      </div>
      <div class="gradeList">
        <el-row class="gradeRow">
          <el-col class="basicItem" :span="4">课程编号</el-col>
          <el-col class="basicItem" :span="4">课程名</el-col>
          <el-col class="basicItem" :span="4">课程学时</el-col>
          <el-col class="basicItem" :span="4">课程学分</el-col>
          <el-col class="basicItem" :span="4">课程成绩</el-col>
          <el-col class="basicItem" :span="4">所得绩点</el-col>
        </el-row>
        <grade-item v-for="it in termScore.score" :key="it" :item="it"></grade-item>
      </div>
    </el-card>
    <el-card class="termCard" v-else shadow="never">
      <p class="emptyTip">暂无当前学期的成绩</p>
    </el-card>
  </div>
</template>

<script lang="ts">
import { computed } from 'vue'
import gradeItem from '@/components/studentPage/studentGarde/gradeItem.vue'
export default {
  name: 'termCard',
  props: {
    termScore: Object,
    termTitle: String
  },
  components: {
    gradeItem
  },
  setup (props: any) {
    const totalPoint = computed(() => {
      var points = 0
      props.termScore.score.forEach((v: any) => {
        points += parseFloat(v.credit)
      })
      return points
    })
    return {
      totalPoint
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/Fonts/FontMap/FontMap";
@import "../../../assets/Fonts/FontMap/FontList.css";
.termCard{
  width: 100%;
  top: 20px;
  .termTitle{
    width: 100%;
    border-bottom: 1px solid #DCDFE6;
    .topCalc{
      display: flex;
      align-items: center;
      height: 40px;
      width: 100%;
      .termName .totalPoint{
        display: flex;
        align-items: center;
        height: 100%;
      }
      .termName{
        justify-content: flex-start;
        span{
          float: left;
          font-family: $Mi_Lan;
          font-weight: bold;
          font-size: 16px;
          span{
            float: right;
            color: #409EFF;
          }
        }
      }
      .totalPoint{
        justify-content: flex-end;
        span{
          float: right;
          font-family: $Mi_Lan;
          font-weight: bold;
          font-size: 16px;
          span{
            color: #409EFF;
          }
        }
      }
    }
  }
}
.cardContent{
  width: 100%;
  height: fit-content;
  padding-top: 25px;
  position: relative;
  color: #606266;
}
.term {
  position: absolute;
  font-family: $SH_Serif_Regular;
  font-size: 18px;
  font-weight: bold;
  top: -5px;
  left: 0;
  z-index: 10;
}
.gradeRow{
  height: 40px;
  width: 100%;
  .basicItem{
    height: 100%;
    display: flex;
    align-items: center;
  }
}
.gradeRow{
  height: 40px;
  width: 100%;
  .basicItem{
    height: 100%;
    display: flex;
    align-items: center;
    font-family: $SH_Serif_Regular;
    font-size: 16px;
    font-weight: bold;
    color: #909399;
    justify-content: center;
  }
}
.emptyTip{
  font-family: $SH_Serif_Regular;
  font-size: 16px;
}
</style>
